import { useEffect, useRef } from "react";
import { useOutletContext } from "react-router-dom";

function ChatRoute() {
  const { messages, loading, currentUserId, typingNames } = useOutletContext();
  const listEnd = useRef(null);

  useEffect(() => {
    listEnd.current?.scrollIntoView({ behavior: "smooth" });
  }, [messages, typingNames]);

  return (
    <MessageList
      messages={messages}
      currentUserId={currentUserId}
      typingNames={typingNames}
      listEndRef={listEnd}
      loading={loading}
    />
  );
}

window.ChatRoute = ChatRoute;